<template>
  <div class="campUniformRanking">
    <GdwyyAppBigTitle icon="zl/icon_fz" :time="queryParam.dayId" title="全市营服排名"></GdwyyAppBigTitle>
    <Search ref="SearchRef" @changeForm="handlechangeForm"></Search>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div class="main block-pd" v-else>
      <a-table
        :columns="tableColumns"
        :data-source="tableData"
        :bordered="true"
        :pagination="false"
        size="small"
        :scroll="{ x: 300, y: 500 }"
      >
        <template slot="PM" slot-scope="text, record, rowIndex">
          <span v-if="text === 1 && rowIndex != 0">
            <img class="pm-icon" src="~@assets/imgs/reconsitution/zl/icon_fir@2x.png" alt="" />
          </span>
          <span v-else-if="text === 2 && rowIndex != 0">
            <img class="pm-icon" src="~@assets/imgs/reconsitution/zl/icon_sec@2x.png" alt="" />
          </span>
          <span v-else-if="text === 3 && rowIndex != 0">
            <img class="pm-icon" src="~@assets/imgs/reconsitution/zl/icon_thi@2x.png" alt="" />
          </span>
          <span v-else>
            {{ text }}
          </span>
        </template>
        <template slot="WG" slot-scope="text, record, rowIndex">
          <span class="blue hover" v-if="rowIndex == 0" @click="viewGridBqData(record)">{{ text }}</span>
          <span v-else>{{ text }}</span>
        </template>
        <template slot="ZYX" slot-scope="text">
          <span class="zyx-box" v-if="text == 0">全部</span>
          <span class="zyx-box" v-if="text == 1">营业线</span>
          <span class="zyx-box" v-if="text == 2">社渠线</span>
          <span class="zyx-box" v-if="text == 3">智家线</span>
        </template>
      </a-table>
      <div style="text-align: right; padding: 10px 0 20px">
        <a-pagination
          size="small"
          v-model="pagination.current"
          :pageSize="pagination.pageSize"
          :showTotal="pagination.showTotal"
          :total="pagination.total"
          @change="requestApi"
        />
      </div>
    </div>
  </div>
</template>
  
  <script>
import { GdwyyAppBigTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import Search from './components/search.vue'
import { indexTableColumns } from './common'
import { parseResultAction } from '@/api/manage'

const _apiConfig = [
  {
    url: '8a31cdd68a7e768a018ac29809da0014',
    dataType: 'Array',
    requestPostHook: 'allrequestPostHook',
    loading: 'loading',
  },
  // {
  //   url: '8a31cdd68a7e768a018ac29784480013',
  //   dataType: 'Array',
  //   resultParamsName: 'bwgList'
  // }
]
export default {
  name: 'campUniformRanking',
  components: { GdwyyAppBigTitle, Search },
  mixins: [reconsitutionMixin],
  data() {
    return {
      loading: false,
      queryParam: {
        gridId: '',
        dayId: '',
        marketType: '0',
        kpiCode: 'YW_0001',
      },
      allList: [],
      bwgList: [],
      pagination: {
        position: 'bottom',
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      tableColumns: indexTableColumns,
      tableDataTemp: [],
    }
  },

  computed: {
    tableData() {
      let list = []
      list = list.concat(this.bwgList)
      list = list.concat(this.allList)
      return list
    },
  },

  async created() {
    const that = this
    await that.initData()
    that.$nextTick(async () => {
      const { code, type } = await that.$refs.SearchRef.getKpiCodeList()
      that.queryParam[type] = code
      that.requestApi()
    })
    function main(e) {
      if (e.key === '$dialogFinish' && e.newValue) {
        localStorage.setItem('$dialogFinish', '')
        // setAllRequest(_apiConfig, {
        //   ...queryParam,
        //   gridId: localStorage.getItem('$gridId'),
        //   pageNum: pagination.current,
        //   pageSize: pagination.pageSize,
        // })
        that.$nextTick(async () => {
          const { code, type } = await that.$refs.SearchRef.getKpiCodeList()
          that.queryParam[type] = code
          that.requestApi()
        })
      }
    }
    // 此处的监听 似乎是只在app中生效,在本地开的前端服务是不生效的
    window.addEventListener('storage', main)
  },

  methods: {
    async requestApi() {
      this.tableDataTemp = []
      this.loading = true
      this.setAllRequest(_apiConfig, {
        ...this.queryParam,
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        gridId: localStorage.getItem('$gridId'),
      })
      await this.getBwgList()
      this.loading = false
    },
    allrequestPostHook(data) {
      const { list, total } = data
      this.allList = list
      this.tableDataTemp = this.tableDataTemp.concat(list)
      this.pagination.total = total
    },
    async getBwgList() {
      this.bwgList = []
      const { success, result } = await parseResultAction('8a31cdd68a7e768a018ac29784480013', {
        ...this.queryParam,
        gridId: localStorage.getItem('$gridId'),
      })
      success && (this.bwgList = result)
      return Promise.resolve(true)
    },
    viewGridBqData(record) {
      this.$open('/publicline/card/ceo/yfDetailPanel', {
        queryParam: JSON.stringify({ ...this.queryParam, gridName: record.GRID_NAME }),
      })
      //   this.$refs.GdwyyWebDetailDialogRef.open({ ...this.rankParams, gridName: record.GRID_NAME })
    },
    handlechangeForm({ code, type }) {
      this.queryParam[type] = code
      this.pagination.current = 1
      this.requestApi()
    },
  },
}
</script>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.campUniformRanking {
  background: #fff;
  margin-top: 3.2vw;

  .zyx-box {
    background: #eefffa;
    border: 0.2667vw solid rgba(34, 172, 134, 0.5);
    border-radius: 1.0667vw;
    // width: 2.9167vw;
    // height: 1.0417vw;
    padding: 1.0667vw 2.1333vw;
    line-height: 3.2vw;
    font-size: 3.2vw;
    color: #22ac86;
    display: inline-block;
  }
  .pm-icon {
    width: 4.8vw;
    height: 4.8vw;
  }
}
</style>